<template>
  <div class="preview-list">
    <template v-for="item in fileList" :key="item.name">
      <div class="item" v-if="item.type == 'video'">
        <video
          class="video"
          :src="item.url"
          @click="previewVideo(item)"
        ></video>
      </div>
      <el-image
        class="item"
        :width="50"
        :src="item.url"
        :height="50"
        v-else
        @click="previewVideo(item)"
      ></el-image>
    </template>
    <el-dialog
      v-model="videoVisible"
      :title="name"
      append-to-body
      @close="closeVideo"
    >
      <video
        ref="video"
        :src="currFile.url"
        controls="true"
        class="pre-video"
        v-if="currFile.type == 'video'"
      ></video>
      <el-image :src="currFile.url" v-else></el-image>
    </el-dialog>
  </div>
</template>
<script setup>
const props = defineProps({
  fileList: {
    type: Array,
    default: () => [],
  },
});
const videoVisible = ref(false);
const currFile = ref({});
const name = ref("");
const previewVideo = (file) => {
  currFile.value = file;
  const list = currFile.value.name.split("/");
  name.value = list[list.length - 1];
  videoVisible.value = true;
};
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const video = ref();
const closeVideo = () => {
  // 关闭视频
  if (currFile.value.type == "video") {
    video.value.pause();
  }
  videoVisible.value = false;
};
</script>

<style lang="scss" scoped>
.preview-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  .video {
    transition: all 0.3s;
    cursor: pointer;
    height: 90px;
    width: 160px;
    &:hover {
      transform: scale(1.2);
    }
  }
  .item {
    border-radius: 5px;
    height: 50px;
    width: 50px;
    box-shadow: 0 0 5px 1px #ccc;
    margin-right: 5px;
    overflow: hidden;
    :deep(.el-image__inner) {
      transition: all 0.3s;
      cursor: pointer;
      &:hover {
        transform: scale(1.2);
      }
    }
  }
}
.pre-video {
  width: 100%;
  max-height: 500px;
}
</style>
